@charset "UTF-8";
/**
 * blog less style
 * @authors zhuhui (zhuhui@yidian-mall.com)
 * @date    2019-03-28 15:00:28
 * @version $Id$
 */
@gray-lighter:#f8f8f8;
@gray-light:#efefef;
@gray-mid:#e2e2e2;
@gray-mider:#cccccc;
@gray-dark:#b9b9b9;
@gray-darker:#8d8d8d;
@gray-block:#545454;
@gray-blocker:#2E363F;
@gray-blockest:#282E3B;
@link:#3999d9;
@white:white;
@red:#cf0012;
@main-bg-color:#d9edf7;
@main-color: #31708f;
a{
    display: inline-block;
    text-decoration: none;
    color: @gray-blocker;
    cursor: pointer;
    &:hover{color: @main-color;}
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: PingFangSC-Regular,Microsoft YaHei,SimSun,Arial,Helvetica,Verdana,sans-serif !important;
    font-size: 14px;
    color: @gray-block;
    background-color: @gray-lighter;
}
.no-scroller{overflow: hidden;}
.show{display: block !important;}
.hide{display: none !important;}
.clear-top{top: 0 !important;}
.breadcrumb-nav-top{top: 30px !important;}
.bottom{bottom: 20px !important;}
#header,#footer{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 99;
}
#header{background-color: @white;}
#footer{
    position: fixed;
    bottom: 0;
    top: auto;
    height:30px;
    line-height: 30px;
    text-align: center;
    background-color: @gray-mid;
    font-size: 12px;
}
#content{
    position: absolute;
    top: 70px;
    bottom:40px;
    left: 10%;
    right: 10%;
    overflow: hidden;
    #right-side,#left-side{
        position:absolute;
        right: 0;
        width: 290px;
        height: 100%;
    }
    #right-side{
        box-sizing: border-box;
        border-top: solid 1px @gray-mider;
        border-bottom: solid 1px @gray-mider;
        .panel{
            .panel-body{
                li{
                    a{
                        width: 260px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    #left-side{
        left: 0;
        width: auto;
        right: 300px;
        background-color: @gray-mid;
        #slider{
            position: absolute;
            width: 100%;
            height: 150px;
            box-sizing: border-box;
            border: solid 1px @gray-mid;
            position:relative;
            background-color: lightblue;
            .swiper-free{
                text-align: center;
                width: 100%;
                height: 100%;
                color: #fff;
                cursor: pointer;
                p{
                    font-style: italic;
                    font-size: 25px;
                }
            }
            .pagination-free{
                position: absolute;
                z-index: 2;
                text-align: center;
                bottom: 3px;
                width: 100%;
                .swiper-pagination-switch {
                    display: block;
                    width: 8px;
                    height: 8px;
                    border-radius: 8px;
                    background-color: @main-color;
                    margin: 0 0 5px;
                    opacity: 0.8;
                    border: 1px solid @white;
                    display: inline-block;
                    margin: 0 1px;
                }
                .swiper-active-switch {background-color: @white;}
            }
            .edit{
                font-size: 12px;
                position: absolute;
                left: 3px;
                top: 3px;
                overflow: auto;
                z-index: 10;
                padding: 2px 4px;
                background-color: @gray-mid;
                line-height: 18px;
                text-align: center;
                &:hover{background-color: @main-bg-color;}
            }
        }
        #list{
            position: absolute;
            left: 0;
            right: 0;
            top: 150px;
            bottom: 0;
            padding: 10px;
            .edit{
                font-size: 12px;
                position: absolute;
                right: 3px;
                top: 3px;
                padding: 5px;
                background-color: @gray-mid;
                &:hover{background-color: @main-bg-color;}
            }
        }
        .pagination{
            position: absolute;
            height: 30px;
            line-height: 30px;
            bottom: 0;
            width: 100%;
            text-align: center;
            i{margin-left: 5px;}
            &:hover{
                background-color: @main-bg-color;
                color: @main-color;
                cursor: pointer;
            }
        }
        #breadcrumb-nav{
            height: 30px;
            line-height: 30px;
            background-color: @gray-lighter;
            padding-left: 10px;
            b,a{display: inline;}
            & > a{
                &:nth-child(2){
                    &:before{
                        display: none;
                    }
                }
                &:before{
                    padding-left: 2px;
                    padding-right: 5px;
                }
            }
            .add{
                font-size: 10px;
                position: absolute;
                left: 3px;
                top: 3px;
                overflow: auto;
                z-index: 10;
                padding: 2px 4px;
                background-color: @gray-mid;
                line-height: 18px;
                text-align: center;
                &:hover{background-color: @main-bg-color;}
            }
        }
    }
}
#menu-btn{
    position:absolute;
    top: 3px;
    right: 8px;
    width: 20px;
    background-color: @gray-darker;
    opacity: 0.8;
    filter: alpha(opacity=80);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
    color: @white;
    padding: 3px;
    text-align: center;
    cursor: pointer;
    z-index: 100;
    display: none;
    &:hover{
        opacity: 1;
        filter: alpha(opacity=100);
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    };
}
.logo,.menu-list,.user-info,.search{
    float: left;
    height: 60px;
    line-height: 60px;
}
.logo{
    width: 180px;
    text-align: center;
    margin-right: 10px;
    background:url(../img/black.png) no-repeat;
    background-size:180px auto;
}
.search{
    float: right;
    font-size: 22px;
    cursor: pointer;
    & > span{display: none;}
}
.user-info{
    float: right;
    width: 160px;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
    .user-avatar,.user-name{
        float: left;
        height: 60px;
        line-height: 60px;
    }
    .user-avatar{
        margin: 10px 0;
        img{
            width: 40px;
            height: 40px;
            border-radius:40px;
        }
    }
    .user-name{
        text-align: left;
        width: 100px;
        margin-left: 10px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
}
.menu-list{
    position:absolute;
    left: 190px;
    right: 200px;
    overflow: hidden;
    .nav{border-bottom: solid 1px @white;}
    &:hover{
        overflow: visible;
        .nav{border-bottom: solid 1px @gray-darker;}
    }
}
.nav{
    font-size: 16px;
    background-color:@white;
    box-sizing: border-box;
    .nav-item{
        display: inline-block;
        width: 100px;
        text-align: center;
        position: relative;
        color: @gray-blocker;
        span,a{
            cursor: pointer;
            display: block;
        }
        &:hover,span:hover,a:hover{
            background-color: rgba(49,112,143,0.8);color: @white;
            &.sub-left:before,&.sub-down:before{border-color: @main-color;}
            & > .sub-list{display: block;}
        }
        .sub-list{
            position:absolute;
            font-size: 14px;
            display: none;
            line-height: normal;
            background-color: rgba(49,112,143,0.8);
            z-index: 100;
            .nav-item{
                display: block;
                text-align: left;
                clear: both;
                position: relative;
                border-bottom: solid 1px @gray-lighter;
                &:last-child{border-bottom: none;}
                span,a{
                    padding: 7px 10px;
                    color: @white;
                }
                .sub-list{
                    position: absolute;
                    left: 100px;
                    top: 0;
                }
                &.sub-left,&.sub-down{
                    &:before{
                        display: block;
                        border-color: @white;
                    }
                }
            }
        }
        &.sub-left,&.sub-down{
            &:before{
                display: none;
                top: 13px;
                position:absolute;
                right: 3px;
                content: '';
                width: 7px;
                height: 7px;
                border:none;
                border-top: 1px solid @gray-darker;
                border-right: 1px solid @gray-darker;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }
        }
    }
    .edit{
        font-size: 12px;
        position: absolute;
        right: 3px;
        top: 3px;
        overflow: auto;
        z-index: 10;
        padding: 2px 4px;
        background-color: @gray-mid;
        line-height: 22px;
        text-align: center;
        &:hover{background-color: @main-bg-color;}
    }
}
.list-item{
    margin-bottom: 10px;
    background-color:@white;
    &:hover{
        box-shadow: darkgrey 0px 0px 7px 1px inset;//边框内阴影
        cursor: pointer;
    }
    .item-title{
        font-size: 16px;
        padding: 10px 10px 5px 10px;
        position: relative;
    }
    .item-des{
        vertical-align: top;
        padding:5px 10px 5px 10px;
        font-size: 14px;
        line-height: 26px;
        text-indent: 2em;
        overflow: auto;
        word-break:break-all;
        img{
            max-width: 80px;
            height: 50px;
        }
    }
}
.panel{
    border:solid 1px @gray-mider;
    background-color: @white;
    margin-bottom: 10px;
    &:first-child{border-top: none;}
    &:last-child{margin-bottom: 0;border-bottom: none;}
    .panel-header{
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-bottom: solid 1px @gray-mider;
        font-weight: bold;
        font-size: 14px;
    }
    .panel-body{
        padding: 0 15px;
        position: relative;
        li{
            padding: 0;
            padding-top: 10px;
            border-bottom: dashed 1px @gray-mid;
            &:last-child{border-bottom: none;}
        }
        p{
            margin: 0;
            padding: 5px 0;
            font-size: 12px;
            b{
                width: 50px;
                display: inline-block;
                text-align: right;
            }
        }
        .qrcode{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 135px;
            height: 60px;
            img{
                height: 60px;
                display: inline-block;
                margin-left: 10px;
                &:first-child{margin: 0}
            }
        }
    }
}
#main{
    padding: 0 10px;
    text-align: center;
    position: relative;
    height: 100%;
}
#main-footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    height:30px;
    line-height: 30px;
    text-align: center;
    background-color: @gray-mid;
}
.main-wrapper{
    width: 35%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    .site-logo{
        img{
            width: 100%;
            margin-top: 80px;
            margin-bottom: 30px;
        }
    }
    .form-btns{
        margin-top: 20px;
        .btn-primary{
            width: 100%;
        }
    }
}
.form-wrapper{
    .form-item{
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box;
        border: solid 1px @gray-mid;
        background-color: @white;
        display:table;
        overflow: hidden;
        &:hover{border: solid 1px @main-bg-color;}
        .item-label,.item-input{display:table-cell;}
        .item-label{
            width: 20px;
            padding-left: 5px;
            text-align: center;
        }
        .item-input{
            text-align: left;
            margin: 0;
            width: 99%;
            border: 0;// 去除未选中状态边框
            outline: none;// 去除选中状态边框
            background-color: rgba(0, 0, 0, 0);// 透明背景
            height: 30px;
            line-height: 30px;
        }
    }
    .item-search{
        position: relative;
        border:none;
        &:hover{border:none;}
        .search-input{
            padding-right:48px;
            .item-input{
                border: solid 1px @gray-mid;
                border-right: none;
                padding-left: 5px;
                &:focus{border: solid 1px @main-bg-color;}
            }
        }
        .search-btn{
            position: absolute;
            top: 0;
            right: 0;
            height: 34px;
        }
    }
}
.btn-primary{
    border: 0;
    background-color: rgba(0, 0, 0, 0);// 透明背景
    padding:7px 10px;
    background-color: @main-bg-color;
    color: @main-color;
    font-size: 14px;
    cursor: pointer;
}
.article{
    .article-title{
        text-align: center;
        margin: 0;
        font-size: 16px;
    }
    .article-publish{
        padding: 15px 0;
        text-align: center;
        span,a{
            display: inline-block;
            padding:0 5px;
            font-size: 12px;
            font-weight: bold;
            i{
                font-weight: normal;
                font-style: normal;
            }
            .fa{
                color: red;
                font-size: 14px
            }
        }
    }
    .acticle-context{
        margin-top: 10px;
        p{
            margin: 0;
            margin-top: 5px;
        }
    }
}
@media (max-width: 1200px) {
    #content{
        left: 7%;
        right: 7%;
        #right-side{
            width: 250px;
            .panel{
                .panel-body{
                    li{a{ width: 220px;}}
                }
            }
        }
        #left-side{right: 260px;}
    }
}
@media (max-width: 992px) {
    #content{
        left: 10px;
        right: 10px;
        #right-side{
            width: 220px;
            .panel{
                .panel-body{
                    li{a{width: 190px;}}
                    p{padding: 3px 0;}
                    .qrcode{
                        width: 115px;
                        img{
                            height: 50px;
                            margin-left: 5px;
                        }
                    }
                }
            }
        }
        #left-side{right: 230px;}
    }
}
@media (max-width: 768px) {
    #header{
        bottom:0px;
        width: 120px;
        height: auto;
        background-color: @gray-blocker;
        color: @white;
        overflow: hidden;
    }
    #footer{left: 120px;}
    #content{
        top: 0;
        right: 0;
        left: 120px;
        #right-side{display: none;}
        #left-side{
            right: 0;
            #slider{
                height: 100px;
            }
            #list{top: 100px;}
        }
    }
    .logo,.menu-list,.user-info,.search{
        width: 120px;
        margin: 0;
        clear: both;
        color: @gray-dark;
    }
    .logo{
        height: 40px;
        line-height: 40px;
        background:url(../img/white.png) no-repeat;
        background-size:120px auto;
        &:hover{background-color: @gray-blockest;}
    }
    .search{
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        padding-left: 10px;
        clear: both;
        color: @gray-dark;
        & > span{
            padding-left: 10px;
            display: inline-block;
            font-size: 14px;
        }
        &:hover{
            background-color: @gray-blockest;
            color: @white;
        }
        &:before{padding-left: 10px}
    }
    .user-info{
        padding: 5px 0;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        &:hover{background-color: @gray-blockest;}
        .user-avatar,.user-name{
            float: left;
            height: 30px;
            line-height: 30px;
        }
        .user-avatar{
            margin: 0;
            margin-left: 5px;
            margin-right: 5px;
            img{
                width: 30px;
                height: 30px;
                border-radius:30px;
            }
        }
        .user-name{
            width: 70px;
            text-align: left;
            margin: 0;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            a{
                color: @gray-dark;
                &:hover{color: @white;}
            }
        }
    }
    .menu-list{
        left: 0;
        right: 0;
        top: 111px;
        bottom:0;
        height: auto;
        line-height: normal !important;
        margin-bottom: 0;
        .nav{border-bottom:none;}
        &:hover{.nav{border-bottom:none;}}
    }
    .nav{
        font-size: 14px;
        height: auto;
        background-color:transparent;
        .nav-item{
            clear: both;
            display: block;
            width: 100%;
            border-right: none;
            text-align: left;
            box-sizing: border-box;
            border-top: 1px solid #37414b;
            border-bottom: 1px solid #1f262d;
            background-color:transparent;
            &:hover{
                background-color: transparent;
                &.sub-left:before,&.sub-down:before{border-color: @gray-darker;}
                & > .sub-list{display: none;}
            }
            span,a{
                padding: 8px !important;
                color: @gray-dark;
                &:hover{background-color: @gray-blockest;}
            }
            &.sub-left{
                &:before{
                    position:absolute;
                    top: 14px !important;
                    right: 7px !important;
                    content: '';
                    width: 7px;
                    height: 7px;
                    border: none;
                    border-top: 1px solid @gray-darker !important;
                    border-right: 1px solid @gray-darker !important;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                }
            }
            &.sub-down{
                &:before{
                    position:absolute;
                    top: 12px !important;
                    right: 7px !important;
                    content: '';
                    width: 7px;
                    height: 7px;
                    border: none;
                    border-bottom: 1px solid @gray-darker !important;
                    border-right: 1px solid @gray-darker !important;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                }
            }
            &.sub-left,&.sub-down{&:before{display: block;}}
            .sub-list{
                position:relative;
                overflow: auto;
                background-color:transparent;
                display: none;
                z-index: auto;
                .nav-item{
                    border-bottom:none;
                    line-height: normal;
                    span,a{
                        padding: 8px;
                        padding-left: 17px !important;
                    }
                    .sub-list{
                        left: 0;
                        clear: both;
                        position: relative;
                        .nav-item{
                            span,a{
                                padding-left: 27px !important;
                            }
                            .sub-list{
                                .nav-item{
                                    span,a{
                                        padding-left: 37px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            &.active{
                border-bottom:none;
                background-color: @gray-block !important;
                & > .sub-list{display: block !important;}
            }
        }
        .edit{
            font-size: 10px;
            line-height: 18px;
        }
    }
    .main-wrapper{
        width: 100% !important;
        .site-logo{
            img{
                width: 70%;
                margin-top: 20px;
                margin-bottom: 10px;
            }
        }
    }
}
@media (max-width: 637px) {
    #header{display: none;}
    #footer{left: 0;z-index: 98;font-size: 10px}
    #content{left: 0;}
    #menu-btn{display: block;}
    .header-show{
        display: block !important;
        animation:showHeaderAnimation 1s;
        -moz-animation:showHeaderAnimation 1s;
        -webkit-animation:showHeaderAnimation 1s;
        -o-animation:showHeaderAnimation 1s;
    }
    @keyframes showHeaderAnimation{
        0%   {left:-120px;}
        100% {left:0px;}
    }

    @-moz-keyframes showHeaderAnimation{
        0%   {left:-120px;}
        100% {left:0px;}
    }

    @-webkit-keyframes showHeaderAnimation{
        0%   {left:-120px;}
        100% {left:0px;}
    }

    @-o-keyframes showHeaderAnimation{
        0%   {left:-120px;}
        100% {left:0px;}
    }
}
// 滚动条样式
.mCustomScrollbar{
    .mCSB_container_wrapper{
        margin-right: 0px;//内容与滚动条的距离
        margin-bottom: 0px;//内容与滚动条的距离
        .mCSB_container{padding-bottom: 2px !important;padding-right: 0 !important;}
    }
    .mCSB_scrollTools{
        right: 0;//滚动条的位置
        margin: 0;
        .mCSB_dragger{
            .mCSB_dragger_bar{background-color: @gray-darker;}//小滚动条的背景色
            &:hover{
                .mCSB_dragger_bar{ background-color: @gray-blocker; }//小滚动条hover上去的颜色
            }
        }
        .mCSB_draggerRail{
            background-color:transparent !important;//长滚动条的颜色
            &:hover{background-color:transparent !important;}//长滚动条hover上去的颜色
        }
    }
    // 垂直滚动条
    .mCSB_scrollTools_vertical{
        width: 5px;//滚动条的宽
        right:0;
        margin: 0 !important;
        .mCSB_dragger{
            height: 50px;//小滚动条的高
            .mCSB_dragger_bar{width: 5px;}//小滚动条的宽
        }
        .mCSB_draggerRail{width:5px;}//长滚动条的宽
    }
    // 水平滚动条
    .mCSB_scrollTools_horizontal{
        height: 5px;//滚动条的高
        bottom: 0px;
        margin: 0 !important;
        .mCSB_dragger{
            width: 50px;//小滚动条的宽
            .mCSB_dragger_bar{margin:0;height: 5px;}//小滚动条的高
        }
        .mCSB_draggerRail{margin:2px 0;height: 5px;}//长滚动条的高
    }
    .mCSB_vertical_horizontal{
        & > .mCSB_scrollTools_vertical{bottom:5px;}//垂直滚动条最下边
        & > .mCSB_scrollTools_horizontal{right: 5px}//水平滚动条最右边
    }
    .mCSB_horizontal.mCSB_inside > .mCSB_container{margin-bottom: -2px;}
}